<template>
    <div class="list">
        <div class="list-item">
            <div 
            v-for="item of this.data"
            :key="item.id"
            class="item-center">
                <div class="img-box">
                    <img :src="item.url" alt="">
                </div>
                <h1 class="title">{{item.first_title}}</h1>
                <p class="word">{{item.second_title}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name: 'list',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
          
            data:[],
            categoryName:'橱柜',
            page:1,
            size:12
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        this.getPageInit()
    },
    methods:{
       tab:function(index){

                    for(var i=0;i<this.tabs.length;i++){
                        this.tabs[i].show=false;
                        if(i==index){
                            this.tabs[index].show=true;
                        }
                    }
                     for(var i=0;i<this.litter.length;i++){
                        this.litter[i].show=false;
                        if(i==index){
                            this.litter[index].show=true;
                        }
                    }
       },
    //产品列表
        getPageInit(){
            axios.get(this.baseUrl+'cms/news/all',
            {
                params:{
                    page:this.page,
                    size:this.size,

                }
            }).then(this.pageInit)
        },
        pageInit(response){
            console.log(response)
            this.data = response.data.data
            this.total = response.data.count;
             for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                
            }
        }

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.list 
    padding-bottom 2rem
.list-item 
    display block
    background white
    overflow hidden
    margin-bottom 0.2rem
.item-center 
    margin 0.2rem
.img-box 
    width 100%
    height 4.18rem
    // background red
    overflow hidden
.title 
    font-weight bold
    font-size 0.32rem
    line-height 0.64rem
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
.word 
    font-size 0.24rem   
    color #666666
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    padding-bottom 0.2rem
</style>
